import React, {RefObject} from "react";
import {Button as AntdButton, Tabs as AntdTabs} from 'antd';
import {renderItems, render, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash';
import {YvanEvent} from "../types";
import {TabsType, TabsPosition, TabPaneProps, TabsProps} from "antd/lib/tabs";
import {apply, YvanEventBind, YvanEventDispatch} from "..";
import {SizeType} from "antd/lib/config-provider/SizeContext";
import * as Extend from "../extend";
import {FormInstance} from "antd/lib/form/hooks/useForm";
import {toJS} from "mobx";


export interface ImginforVJsonProp {
    items: any[]
    viewId:any
}

interface ImginforState {

}

@VJsonComponent({
    view: 'imginfor'
})
export default class Listimg extends VJsonComponentBase<ImginforVJsonProp, ImginforState> {
    static defaultProps = {
        items: [],
        getChecked:[]
    }

    defaultActiveKey?: string
    private _activeKey?: string

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Listimg.defaultProps
        )
    }
    componentDidMount() {
        if(this.props.vjson.leftImg){
            //this.props.vjson.imgIndex
        }
    }
    render() {
        let centerClass='imginfor-center',rightCode;
        if(this.props.vjson.leftImg){
            centerClass=centerClass+" imginfor-center-left"
        }
        if(this.props.vjson.rightType!==undefined){
            centerClass=centerClass+" imginfor-center-right"
            if(this.props.vjson.rightType=='see'){
                let _inforName=this.props.vjson.imgData[this.props.vjson.imgIndex].inforName;
                let _inforNameData=this.props.vjson.imgData[this.props.vjson.imgIndex].inforNameData;
                rightCode=<div className="imginfor-right">
                    {
                        _.map(_inforName, (item: any,index:any) => {
                            return(
                                <div className="imginfor-box" key={index}>
                                    <div className="imginfor-name">{item}</div>
                                    <div className="imginfor-mail">{_inforNameData[index]}</div>
                                </div>
                            )
                        })
                    }
                </div>
            }else if(this.props.vjson.rightType=='edit'){
                rightCode=<div className="imginfor-right">
                    编辑
                </div>
            }
        }
        
        return (
            // @ts-ignore
            <div className="imginfor-wrap">
                {
                    (!this.props.vjson.leftImg) ? null :<div className="imginfor-left"><ul>
                    {
                        _.map(this.props.vjson.imgData, (item: any,index:any) => {
                            if(index==this.props.vjson.imgIndex){
                                return(
                                    <li key={index}><img src={item.img} alt="" style={{width:'100%'}} className="img-selected"/></li>
                                )
                            }else{
                                return(
                                    <li key={index}><img src={item.img} alt="" style={{width:'100%'}}/></li>
                                )
                            }
                        })
                    }</ul></div>
                }
                {
                    (!this.props.vjson.centerImg) ? null :<div className={centerClass}>12</div>
                }
                {
                    (!this.props.vjson.rightType) ? null :rightCode
                }
            </div>
        )
    }
}